<template>
  <div class="container">
    <el-card>
      <!-- 顶部提示 -->

      <el-row>
        <el-col class="top_title">
          <span>说明：目前支持学科和关键字条件筛选</span>
          <el-button type="success" size="small" icon="el-icon-edit" @click="toAddQuestion" >新增试题</el-button>
        </el-col>
      </el-row>
      <!-- 顶部提示 end -->
      <!-- 顶部搜索表单 -->
      <el-form  label-width="80px" :model="ruleForm" ref="forms">
        <el-row>
          <!-- 学科 -->
          <el-col :span="6">
            <el-form-item label="学科">
              <el-select style="width:100%;" placeholder="请选择" v-model="ruleForm.subjectID" @change="onSubjectChange(ruleForm.subjectID)">
                <!-- label的值是标题; value的值是传递给v-model的 -->
                <el-option v-for="item in subject" :key="item.value" :label='item.label' :value="item.value"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 目录 -->
          <el-col :span="6">
            <el-form-item label="二级目录">
              <el-select style="width:100%;" v-model="ruleForm.catalogID">
                <el-option v-for="item in catalogue" :key="item.value" :label='item.directoryName' :value="item.creatorID"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <!-- 标签 -->
          <el-col :span="6">
            <el-form-item label="标签">
              <el-select style="width:100%;" v-model="ruleForm.tags">
                <el-option v-for="item in labels" :key="item.id" :label="item.tagName" :value="item.id"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 关键字 -->
          <el-col :span="6">
            <el-form-item label="关键字">
              <el-input v-model="ruleForm.keyword"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- ==================================================================================================== -->
        <el-row>
          <!-- 试题类型 -->
          <el-col :span="6">
            <el-form-item label="试题类型">
              <el-select style="width:100%;" v-model="ruleForm.questionType">
                <el-option v-for="item in questionTypeList" :key='item.value' :label='item.label' :value="item.value" > </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 难度 -->
          <el-col :span="6">
            <el-form-item label="难度">
              <el-select style="width:100%;" v-model="ruleForm.difficulty">
                <el-option v-for="item in difficultyList" :key="item.value" :label="item.label" :value="item.value" > </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <!-- 方向 -->
          <el-col :span="6">
            <el-form-item label="方向">
              <el-select style="width:100%;" v-model="ruleForm.direction" >
                <el-option v-for="(item,index) in directionList" :key="index" :label="item" :value="item"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 录入人 -->
          <el-col :span="6">
            <el-form-item label="录入人">
              <el-select style="width:100%;" v-model="ruleForm.creatorID" >
                <el-option v-for="item in lister" :key="item.id" :label="item.username" :value="item.id" > </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- ================================================================================================ -->
        <el-row>
          <!-- 题目备注 -->
          <el-col :span="6">
            <el-form-item label="题目备注" >
              <el-input v-model="ruleForm.remarks" ></el-input>
            </el-form-item>
          </el-col>
          <!-- 企业简称 -->
          <el-col :span="6">
            <el-form-item label="企业简称">
              <el-input v-model="ruleForm.shortName" ></el-input>
            </el-form-item>
          </el-col>
          <!-- 城市 -->
          <el-col :span="6">
            <el-form-item class="city-box" label="城市">
              <el-select class="city-1"  placeholder="请选择" v-model="ruleForm.province"  >
                <el-option v-for="(item,index) in provinceList" :key="index" :label="item" :value="item"> </el-option>
              </el-select>

              <el-select class="city-2"  placeholder="请选择" @click.native="getCity(ruleForm.province)" v-model="ruleForm.city" >
                <el-option :label="item" :value="item" v-for="(item,index) in cityList" :key="index"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" style="text-align: right;">
            <el-button size="small" @click="clearAll">清除</el-button>
            <el-button size="small" type="primary" @click="search" > 搜索</el-button>
          </el-col>
        </el-row>
      </el-form>
      <!-- 顶部搜索表单 end -->
      <!-- 表格 -->
        <el-tabs v-model="activeName" type="card" style="margin-left: 15px" @click.native="handleClick">
          <el-alert
            style="margin: 15px 0"
            show-icon
            type="info"
          >
          <template #title>
            <span>数据一共{{total}}条</span>
          </template>
          </el-alert>
          <el-tab-pane label="全部" name="first"></el-tab-pane>
          <el-tab-pane label="待审核" name="second"></el-tab-pane>
          <el-tab-pane label="已审核" name="third"></el-tab-pane>
          <el-tab-pane label="已拒绝" name="fourth"></el-tab-pane>

        <!-- 区域 -->
        <template>
          <el-table
              :header-cell-style="{ background: '#C0C4CC', color: '#606266' }"
              fixed="left"
              :data="tableData"
              style="width: 100%"
            >
              <el-table-column prop="number" width="180" label="试题编号" />
              <el-table-column prop="subject" label="学科" width="180" />
              <el-table-column prop="catalog" label="目录" width="180" />
              <el-table-column prop="address" label="题型" width="180" >
                 <template #default="{row}">
                   <div>
                     <span v-if="row.questionType === '1'">单选</span>
                     <span v-else-if="row.questionType === '2'">多选</span>
                     <span v-else>简答</span>
                   </div>
                  </template>
              </el-table-column>
              <el-table-column label="题干" width="180">
                <template #default="{row}">
                  <span v-html="row.question"></span>
                </template>
              </el-table-column>
              <el-table-column prop="addDate" width="180" label="录入时间" >
                <template #default="{row}">
                  {{times(row.addDate)}}
                </template>
              </el-table-column>
              <el-table-column prop="difficulty" width="180" label="难度">
                <template #default="{row}">
                  <div>
                    <span v-if="row.difficulty === '1'">简单</span>
                    <span v-else-if="row.difficulty === '2'">一般</span>
                    <span v-else>困难</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="creator" width="180" label="录入人" />
              <el-table-column prop="chkState" width="180" label="审核状态">
                <template #default="{row}">
                  <div>
                    <span v-if="row.chkState == '0'">待审核</span>
                    <span v-else-if="row.chkState == '1'">通过</span>
                    <span v-else>拒绝</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="chkRemarks" width="180" label="审核意见" />
              <el-table-column prop="chkUser" label="审核人" />
              <el-table-column  width="180" label="发布状态">
                <template #default="{row}">
                  <div>
                    <span v-if="(row.publishState==1 && row.chkState==1)">已发布</span>
                    <span v-else-if="(row.publishState==0 && row.chkState==1)">己下架</span>
                    <span v-else>待发布</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column fixed="right" width="250" label="操作">
                 <template #default={row} >
              <div>
                <el-button class="table_btn" size="mini" @click.stop="preview(row.id)">预览</el-button>
                <el-button :class="{ disabled: row.chkState !== 0 }" :disabled="row.chkState !== 0" class="table_btn"  size="mini" @click.stop='examine(row)'>审核</el-button>
                <el-button :class="{ disabled: row.publishState === 1 }" :disabled="row.publishState === 1" class="table_btn"  size="mini" @click="$router.push(`new?id=${row.id}`)" >修改</el-button>
                <el-button class="table_btn"  size="mini" @click="choiceAdd(row, $event)">{{row.publishState === 1 ? '下架' : '上架' }}</el-button>
                <el-button class="table_btn" size="mini" @click="open(row.id)"> 删除</el-button>
              </div>
            </template>
              </el-table-column>
          </el-table>
        </template>
        </el-tabs>
      <!-- 表格 end -->

      <!-- 分页功能 -->
      <div style="margin-top: 10px; display: flex; justify-content: flex-end">
          <el-pagination
            :current-page="page"
            background
            :page-size="pagesize"
            layout="prev, pager, next, sizes, jumper"
            :page-sizes="[5, 10, 20, 40]"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          >
          </el-pagination>
      </div>
      <!-- 分页功能 end-->
    </el-card>
    <!-- 预览 -->
    <questionsPreview ref="questionsPreviewRef" @close='closewindow' :isShowHide.sync="isShowHide" :usersID="usersID"/>
    <!-- 审核 -->
    <toexamine @close='closexamineWindow'  @fatherMethod='getchoice'  :isShowExamine.sync="isShowExamine" :questionItem="questionItem"/>

  </div>
</template>

<script>
// 学科简单列表
import { simple as subjectListApi } from '@/api/hmmm/subjects'
// 目录简单列表
import { list as catalogueApi } from '@/api/hmmm/directorys'
// 标签
import { list as getlabelsApi } from '@/api/hmmm/tags'
// 所有城市
import { provinces as getprovinces, citys as getcitysApi } from '@/api/hmmm/citys'
// 方向  题型  难度
import { direction as getdirection, questionType as getquestionType, difficulty as getdifficulty } from '@/api/hmmm/constants'
// 录入人
import { list as getlistApi } from '@/api/base/users'
// 精选题库列表   删除  上下架  修改
import { choice as getchoiceApi, remove as getremoveApi, choicePublish as getchoicePublishApi } from '@/api/hmmm/questions'
// 时间格式
import dayjs from 'dayjs'

// 子组件导入  预览
import questionsPreview from '../components/Featured-preview.vue'
// 子组件导入  审核
import toexamine from '../components/questions-check.vue'
export default {
  components: {
    questionsPreview,
    toexamine
  },
  data () {
    return {
      // 审核
      isShowExamine: false,
      // 预览显示与隐藏
      isShowHide: false,
      // 预览时传入子组件的试题id
      usersID: 0,
      // 审核
      questionItem: {},
      // 学科列表
      subject: [],
      // 收索学科
      subjects: '',
      // 二级目录
      catalogue: [],
      // 标签
      labels: [],
      // 城市列表
      provinceList: [],
      // 县区列表
      cityList: [],
      // 试题类型
      questionTypeList: getquestionType,
      // 难度
      difficultyList: getdifficulty,
      // 方向
      directionList: getdirection,
      // 录入人
      lister: [],
      // 分页
      page: 1, // 当前页数
      pagesize: 5, // 每页显示多少
      total: 0,
      // Tab标签页
      activeName: 'first',
      ruleForm: {
        subjectID: '', // 学科
        difficulty: '', // 难度
        questionType: '', // 试题类型
        tags: '', // 标签名称
        province: '', // 城市
        city: '', // 县城
        keyword: null, // 关键字
        remarks: '', // 题目备注
        shortName: '', // 企业简称
        direction: '', // 方向
        creatorID: '', // 录入人
        catalogID: '', // 二级目录
        chkState: null // 审核状态
      },
      tableData: [],
      keywords: ''
    }
  },
  created () {
    // 学科
    this.subjectList()
    // 获取城市
    this.provinceList = getprovinces()
    // 获取题库
    this.getchoice()
    // 录入人
    this.getlist()
  },
  methods: {
    // 新增后路由跳转
    toAddQuestion () {
      this.$router.push('new')
    },
    // 学科
    async subjectList () {
      const { data } = await subjectListApi()
      this.subject = data
    },
    // 二级目录 标签
    async onSubjectChange (id) {
      this.ruleForm.catalogID = ''
      this.ruleForm.tags = ''
      const { data: { items } } = await catalogueApi({ subjectID: id, page: 1, pagesize: 100 })
      const res = items.filter(item => item.subjectID === id)
      this.catalogue = res
      const { data: { items: res1 } } = await getlabelsApi({ subjectID: id, page: 1, pagesize: 100 })
      const res2 = res1.filter(item => item.subjectID === id)
      this.labels = res2
    },
    // 录入人
    async getlist () {
      const { data: { list } } = await getlistApi()
      this.lister = list
    },
    // 获取县区
    async getCity (panme) {
      this.cityList = await getcitysApi(panme)
    },
    // 获取题库列表
    async getchoice () {
      const { data } = await getchoiceApi({ page: this.page, pagesize: this.pagesize, chkState: this.ruleForm.chkState })
      this.total = data.counts
      this.tableData = data.items
    },
    // 清除全部
    clearAll () {
      this.ruleForm = {
        subjectID: null, // 学科
        difficulty: '', // 难度
        questionType: '', // 试题类型
        tags: '', // 标签名称
        province: '', // 城市
        city: '', // 县城
        keyword: '', // 关键字
        remarks: '', // 题目备注
        shortName: '', // 企业简称
        direction: '', // 方向
        creatorID: '', // 录入人
        catalogID: '', // 二级目录
        chkState: null // 审核状态
      }
      this.page = 1
      this.getchoice()
    },
    // 收索
    async search () {
      this.keywords = this.ruleForm.keyword
      this.subjects = this.ruleForm.subjectID
      if (this.keywords) {
        const { data } = await getchoiceApi({ page: this.page, pagesize: this.pagesize, chkState: this.ruleForm.chkState, keyword: this.keywords })
        this.tableData = data.items
        this.total = data.counts
      }
      if (this.subjects) {
        const { data } = await getchoiceApi({ page: this.page, pagesize: this.pagesize, chkState: this.ruleForm.chkState, subjectID: this.subjects })
        this.tableData = data.items
        this.total = data.counts
      }
      if (this.subjects && this.keywords) {
        const { data } = await getchoiceApi({ page: this.page, pagesize: this.pagesize, chkState: this.ruleForm.chkState, keyword: this.keywords, subjectID: this.subjects })
        this.tableData = data.items
        this.total = data.counts
      }
    },
    // 分页 页容量变化
    handleSizeChange (val) {
      this.pagesize = val
      this.page = 1
      this.getchoice()
    },
    // 页码变化
    handleCurrentChange (val) {
      this.page = val
      this.getchoice()
    },
    // 时间格式
    times (val) {
      return dayjs(val).format('YYYY-MM-DD HH:mm:ss')
    },
    // Tab栏
    handleClick () {
      switch (this.activeName) {
        case 'first':
          this.ruleForm.chkState = null// 全部状态
          this.getchoice() // 重新获取列表
          break
        case 'second':
          this.ruleForm.chkState = 0 // 待审核
          console.log(this.ruleForm.chkState)
          this.getchoice() // 重新获取列表
          break
        case 'third':
          this.ruleForm.chkState = 1 // 已审核
          console.log(this.ruleForm.chkState)
          this.getchoice() // 重新获取列表
          break
        case 'fourth':
          this.ruleForm.chkState = 2 // 已拒绝
          console.log(this.ruleForm.chkState)
          this.getchoice() // 重新获取列表
          break
      }
    },
    // 删除
    open (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await getremoveApi({ id })
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.getchoice()
        })
    },
    // 上架和下架试题
    choiceAdd (item, e) {
      this.$confirm('您确认' + e.target.innerText + '这道题目吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          let data = {} // 用来接收下面返回的结果
          // 如果确认就加上架/下架 否则什么都不做
          switch (e.target.innerText) {
            case '上架':
              data = await getchoicePublishApi({
                id: item.id,
                publishState: 1
              })
              break

            case '下架':
              data = await getchoicePublishApi({
                id: item.id,
                publishState: 0
              })
              break
          }

          if (data.status === 200) {
            this.$message.success(e.target.innerText + '成功')
          }
          // 更新题库列表
          this.getchoice()
        })
    },
    // 审核
    examine (item) {
      this.isShowExamine = true
      this.questionItem = item
    },
    // 弹窗关闭
    closexamineWindow () {
      this.isShowExamine = false
    },
    // 预览
    async preview (id) {
      // console.log(id)
      // 弹窗显示
      this.isShowHide = true
      this.usersID = id
      // 等待上面执行完在执行  暂未写
      this.$nextTick(() => {
        this.$refs.questionsPreviewRef.detaillist()
      })
    },
    // 弹窗关闭
    closewindow () {
      this.isShowExamine = false
    }
  }
}
</script>

<style scoped lang="scss">
.disabled {
  color: #c0c4cc !important;
}
.el-card {
  margin: 10px;

  .el-button--mini {
    font-size: 10px;
    border: transparent;
    padding: 10px;
    margin: 0;
    color: #409eff;
    background: none;
    &:link {
      color: #606266;
      background: none;
    }
    &:visited {
      color: #606266;
    }
    &:hover {
      background: none;
      color: #606266;
    }
    &:active {
      background: none;
      color: #606266;
    }
  }

  .top_title {
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
    span {
      font-size: 12px;
      color: pink;
    }
  }
  .city-1 {
    width: 45%;
    margin-right: 5%;
  }
  .city-2 {
    width: 50%;
  }
  .el-input__inner {
    width: 100%;
  }
}
</style>
